<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:90%;min-height:60%;">
        <div class="app-body">
            <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="name" label="资产名称" width="150" />
                <el-table-column prop="code" label="资产编号" width="150" />
                <el-table-column prop="oldCode" label="财政资产编号" width="150" />
                <el-table-column prop="model" label="型号" />
                <el-table-column prop="price" label="单价" />
                <el-table-column prop="amount" label="数量" />
                <el-table-column prop="money" label="金额" />
                <el-table-column prop="department" label="使用部门" />
                <el-table-column prop="useTeacher" label="使用人"></el-table-column>
                <el-table-column prop="place" label="存放地点" width="180" />
                <el-table-column prop="managerDepartment" label="管理部门" />
                <el-table-column prop="manager" label="管理人" />
                <template v-slot:empty>
                    <el-empty description="暂无数据"></el-empty>
                </template>
            </el-table>

            <el-config-provider :locale="locale" style="margin-top: 10px;">
                <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>

        </div>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElMessageBox } from "element-plus";
import { vxRule } from "@/utils/validator";
import formatTime from "@/utils/dateFormat.js";
import zhCn from "element-plus/lib/locale/lang/zh-cn";

export default {
    name: "AddBaseAddress",
    components: { ElForm, ElMessage },
    data() {
        return {
            dialogFormVisible: ref(false),
            formLabelWidth: "120px",
            title: "",
            personnelType: "",
            id: '',
            page: 1,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
        };
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {

    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getAssetsDetailList(this.id);
            }
        },
        onSubmit() {
            this.getAssetsDetailList(this.id);
        },

        closeDialog() {
            this.clear();
        },
        cancel() {
            this.dialogFormVisible = false;
            this.clear();
        },

        getAssetsDetailList(id) {
            httpService(`/javaApi/faList/list/${this.page}/${this.pageSize}/${this.id}/0`, {}, "get").then(
                (data) => {
                    if (data.list) {
                        this.list = data.list;
                        this.total = data.total
                    }
                }
            );
        },

        clear() {
            this.dialogFormVisible = false;
            //清空form
            this.title = ''
            // this.id = ''
            this.list = []
            this.page = 1
            this.pageSize = 10
            this.total = ""
            this.limit = ""
        },

        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getAssetsDetailList(this.id);
        },
        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getAssetsDetailList(this.id);
        },

    }
};
</script>
<style scoped>
.el-table {
    margin-bottom: 20px;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.el-tabs {
    height: 100%;
}
.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    margin-bottom: 15px;
}
</style>